<template>
    <div class="index-container">
<!--        搜索栏-->
        <div style="margin-top: 15px;">
            <el-input placeholder="请输入地址" v-model="input3" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" style="background: #83af9b; color: white;" @click="queryHousePlace"></el-button>
            </el-input>
        </div>
<!--        列表框-->
        <div class="border-container">
            <border-box v-for="item in borderBoxList" :key="item.index" :select-type="item.title" :select-content="item.items" v-on:queryHouse="queryHouseType"></border-box>
        </div>
<!--        tab栏-->
        <div class="tabs-container">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="first">
<!--                    <div style="float: right; ">-->
<!--                        <span><a style="color: #000000;" class="ascend">价格 <i class="el-icon-bottom"></i></a></span>-->
<!--                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
<!--                        <span><a style="color: #000000;" class="descend">价格 <i class="el-icon-top"></i></a></span>-->
<!--                    </div>-->
<!--                    <br>-->
<!--                    <el-divider></el-divider>-->
                        <div class="house-card" v-for="item in houseInfo" :key="item.houseId" @click="toHousePage(item.houseId)">
                            <el-card class="box-card" shadow="hover" >
                                <el-row :gutter="20">
                                    <el-col :span="8">
                                        <div class="grid-content bg-purple">
                                            <el-image
                                                    style="width: 100px; height: 100px"
                                                    :src="item.housePhotos"
                                                    fit="full"></el-image>
                                        </div>
                                    </el-col>
                                    <el-col :span="16">
                                        <div class="grid-content bg-purple">
                                            <div class="house-profile">
                                                <div>
                                                    <a class="desc" >{{item.houseTitle}}</a>
                                                </div>

                                                <div class="house-type">
                                                    <span>{{item.roomNum}}室{{item.hallNum}}厅</span>
                                                    <el-divider direction="vertical"></el-divider>
                                                    <span>{{item.houseArea}}平米</span>
                                                    <span style="margin-left: 20px;">
                                </span>
                                                </div>
                                                <div class="house-place">
                                                    <span class="place-container" style="display: inline-block; width: 300px;">{{item.housePlace}}</span>
                                                </div>
                                                <div>
                                                    <el-tag type="danger" v-if="item.rentType === 1">整租</el-tag>
                                                    <el-tag type="warning" v-if="item.rentType === 2">合租</el-tag>
                                                </div>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                                <div>
                                </div>

                                <div class="price-container">
                                    <span style="font-size: 18px; font-weight: 700; color: red;">{{item.housePrice}}&nbsp;</span>
                                    <span style="font-size: 12px; font-weight: 700; color: red;">元/月</span>
                                </div>
                            </el-card>
                        </div>

                    <!--        分页查询-->
                    <div style="text-align: center;">
                        <el-pagination
                                @current-change="handleCurrentChange"
                                :current-page.sync="current"
                                :hide-on-single-page="true"
                                :page-size="pageSize"
                                :total="total"
                                layout="prev, pager, next">
                        </el-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

    </div>
</template>

<script>
    import BorderBox from "../components/BorderBox";
    export default {
        name: "Index",
        components: {BorderBox},
        data() {
            return {
                input3: '',
                pageSize: '',
                total: '',
                current: '',
                houseType: 0,
                rentType: 0,
                housePrice: 0,
                select: '',
                activeName: 'first',
                squareUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                houseInfo: [],
                borderBoxList: [
                    {
                        index: 0,
                        title: '房型',
                        items: [
                            {
                                index: 0,
                                houseType: 0,
                                item: '全部'
                            },
                            {
                                index: 0,
                                houseType: 1,
                                item: '一室'
                            },
                            {
                                index: 0,
                                houseType: 2,
                                item: '二室'
                            },
                            {
                                index: 0,
                                houseType: 3,
                                item: '三室'
                            },
                            {
                                index: 0,
                                houseType: 4,
                                item: '四室及以上'
                            }
                        ]
                    },
                    {
                        index: 1,
                        title: '类型',
                        items: [
                            {
                                index: 1,
                                rentType: 0,
                                item: '全部'
                            },
                            {
                                index: 1,
                                rentType: 1,
                                item: '整租'
                            },
                            {
                                index: 1,
                                rentType: 2,
                                item: '合租'
                            }
                        ]
                    },
                    {
                        index: 2,
                        title: '租金',
                        items: [
                            {
                                index: 2,
                                housePrice: 0,
                                item: '全部'
                            },
                            {
                                index: 2,
                                housePrice: 1,
                                item: '500元以下'
                            },
                            {
                                index: 2,
                                housePrice: 2,
                                item: '500-1000元'
                            },
                            {
                                index: 2,
                                housePrice: 3,
                                item: '1000-1500元'
                            },
                            {
                                index: 2,
                                housePrice: 4,
                                item: '1500-2000元'
                            },
                            {
                                index: 2,
                                housePrice: 5,
                                item: '2000-3000元'
                            },
                            {
                                index: 2,
                                housePrice: 6,
                                item: '3000-5000元'
                            },
                            {
                                index: 2,
                                housePrice: 7,
                                item: '5000元以上'
                            }
                        ]
                    }
                ]
            }
        },
        created() {
          const _this = this
            _this.$http.get('/house/selectHouseByRoomNumAndHousePriceAndCentType/' + this.houseType + '/' + this.rentType + '/' + this.housePrice + '/' + 1).then(function (resp) {
              console.log(resp)
                if(resp.data.code === 201)
                {
                  _this.total = resp.data.data.total
                  _this.pageSize = resp.data.data.pageSize
                  _this.houseInfo = resp.data.data.list
                    console.log(_this.houseInfo)
                  for (let i = 0; i < _this.houseInfo.length; i ++)
                  {
                      if(_this.houseInfo[i].housePhotos != null)
                      {
                          _this.houseInfo[i].housePhotos = require('../static/house/' + _this.houseInfo[i].houseId + '/' + (_this.houseInfo[i].housePhotos || "").split(',', 1))
                          console.log(i + "--------" + _this.houseInfo[i].housePhotos)
                      }
                      _this.houseInfo[i].housePlace = _this.houseInfo[i].housePlace.replace('/,/g', '')
                  }
              }
          })
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            toHousePage: function (e) {
                this.$router.push({name: "HousePage", params: { houseId: e}})
            },
            queryHouseType: function (e) {
                if (e.index === 0)
                {
                    this.houseType = e.houseType
                }
                if (e.index === 1)
                {
                    this.rentType = e.rentType
                }
                if (e.index === 2)
                {
                    this.housePrice = e.housePrice
                }
                const _this = this
                _this.$http.get('/house/selectHouseByRoomNumAndHousePriceAndCentType/' + this.houseType + '/' + this.rentType + '/' + this.housePrice + '/' + 1).then(function (resp) {
                    if(resp.data.code === 201)
                    {
                        _this.current = 1
                        _this.total = resp.data.data.total
                        _this.pageSize = resp.data.data.pageSize
                        _this.houseInfo = resp.data.data.list
                        for (let i = 0; i < _this.houseInfo.length; i ++)
                        {
                            _this.houseInfo[i].housePhotos = require('../static/house/' + _this.houseInfo[i].houseId + '/' + _this.houseInfo[i].housePhotos.split(',', 1))
                            _this.houseInfo[i].housePlace = _this.houseInfo[i].housePlace.replace('/,/g', '')
                        }
                        console.log( _this.houseInfo[i].housePhotos)
                    }
                })
            },
            queryHousePlace: function () {
                const _this = this
                _this.$http.get('/house/selectHousesByHousePlace/' + this.input3).then(function (resp) {
                    if(resp.data.code === 201)
                    {
                        _this.houseInfo = resp.data.data
                        for (let i = 0; i < _this.houseInfo.length; i ++)
                        {
                            _this.houseInfo[i].housePhotos = require('../static/house/' + _this.houseInfo[i].houseId + '/' + _this.houseInfo[i].housePhotos.split(',', 1))
                            _this.houseInfo[i].housePlace = _this.houseInfo[i].housePlace.replace('/,/g', '')
                        }
                        console.log( _this.houseInfo[i].housePhotos)
                    }
                })
            },
            handleCurrentChange: function (e) {
                console.log(e)
                const _this = this
                _this.$http.get('/house/selectHouseByRoomNumAndHousePriceAndCentType/' + this.houseType + '/' + this.rentType + '/' + this.housePrice + '/' + e).then(function (resp) {
                    console.log(resp)
                    if(resp.data.code === 201)
                    {
                        _this.total = resp.data.data.total
                        _this.pageSize = resp.data.data.pageSize
                        _this.houseInfo = resp.data.data.list
                        for (let i = 0; i < _this.houseInfo.length; i ++)
                        {
                            _this.houseInfo[i].housePhotos = require('../static/house/' + _this.houseInfo[i].houseId + '/' + _this.houseInfo[i].housePhotos.split(',', 1))
                            _this.houseInfo[i].housePlace = _this.houseInfo[i].housePlace.replace('/,/g', '')
                        }
                        console.log( _this.houseInfo[i].housePhotos)
                    }
                })
            }
        },
        // watch: {
        //     houseType: function () {
        //         const _this = this
        //         _this.$http.get('/house/selectHouseByRoomNumAndHousePriceAndCentType/' + this.roomNum + '/' + this.rentType + '/' + this.housePrice).then(function (resp) {
        //             if(resp.data.code === 201)
        //             {
        //                 _this.houseInfo = resp.data.data
        //                 for (let i = 0; i < _this.houseInfo.length; i ++)
        //                 {
        //                     _this.houseInfo[i].housePhotos = require('../static/house/' + _this.houseInfo[i].houseId + '/' + _this.houseInfo[i].housePhotos.split(',', 1))
        //                     _this.houseInfo[i].housePlace = _this.houseInfo[i].housePlace.replace('/,/g', '')
        //                 }
        //                 console.log( _this.houseInfo[i].housePhotos)
        //             }
        //         })
        //     },
        //     centType: function () {
        //         const _this = this
        //         _this.$http.get('/house/selectHouseByRoomNumAndHousePriceAndCentType/' + this.roomNum + '/' + this.rentType + '/' + this.housePrice).then(function (resp) {
        //             if(resp.data.code === 201)
        //             {
        //                 _this.houseInfo = resp.data.data
        //                 for (let i = 0; i < _this.houseInfo.length; i ++)
        //                 {
        //                     _this.houseInfo[i].housePhotos = require('../static/house/' + _this.houseInfo[i].houseId + '/' + _this.houseInfo[i].housePhotos.split(',', 1))
        //                     _this.houseInfo[i].housePlace = _this.houseInfo[i].housePlace.replace('/,/g', '')
        //                 }
        //                 console.log( _this.houseInfo[i].housePhotos)
        //             }
        //         })
        //     },
        //     roomNum: function () {
        //         const _this = this
        //         _this.$http.get('/house/selectHouseByRoomNumAndHousePriceAndCentType/' + this.roomNum + '/' + this.rentType + '/' + this.housePrice).then(function (resp) {
        //             if(resp.data.code === 201)
        //             {
        //                 _this.houseInfo = resp.data.data
        //                 for (let i = 0; i < _this.houseInfo.length; i ++)
        //                 {
        //                     _this.houseInfo[i].housePhotos = require('../static/house/' + _this.houseInfo[i].houseId + '/' + _this.houseInfo[i].housePhotos.split(',', 1))
        //                     _this.houseInfo[i].housePlace = _this.houseInfo[i].housePlace.replace('/,/g', '')
        //                 }
        //                 console.log( _this.houseInfo[i].housePhotos)
        //             }
        //         })
        //     }
    }
</script>

<style scoped>
    .input-with-select
    {
        width: 300px;
        position: relative;
        left: 750px;

    }

    .border-container
    {
        margin-top: 20px;
        width: 100%;
        border: 1px solid #E6E6E6;
    }

    .tabs-container
    {
        margin-top: 40px;
        width: 100%;
        height: 1500px;
    }

    >>>.el-tabs__item.is-active{
        color: #00C2B3;
    }
    >>>.el-tabs__active-bar{
        background-color: #00C2B3;
    }
    .ascend:hover {
        color: #00C2B3;
    }
    .descend:hover {
        color: #00C2B3;
    }
    .box-card
    {
        display: flex;
        width: 100%;
        height: 150px;
        margin-bottom: 10px;
    }
    .house-profile {
        align-self: center;
    }
    .price-container {
        position: relative;
        left: 900px;
        top: -50px;
    }
    .desc {
        font-size: 16px;
        font-weight: 700;
        color: black;
        width: 100px;
        overflow: hidden; /*溢出的部分隐藏*/
        white-space: nowrap; /*文本不换行*/
        text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
    }
    .box-card:hover .desc
    {
        color: #00C2B3;
        text-decoration: underline;
    }
    .house-type {
        margin-top: 10px;
    }
    .house-type>span
    {
        font-size: 14px;
        color: #333;
    }

    .price-container {
        margin-top: 10px;
    }
</style>
